const React = require('react');
const {
  JDPasswordDialog,
} = require('@areslabs/jdreact-core-lib');
const { LongPasswordDialog } = JDPasswordDialog;

class LongPasswordExample extends React.Component {
  state = {
    inLoading: false,
    errorMessage: null,
    limitCount: 4,
  };
  refreshLayout=() => {
    if(this.dialog && typeof this.dialog.refreshLayout === 'function'){
      this.dialog.refreshLayout();
    }
  }
  render() {
    return (
      <LongPasswordDialog
        ref={v=>this.dialog=v}
        onDismiss={this._onDismiss}
        show={this.props.show}
        onClose={this.props.onClose}
        onConfirm={ this._onConfirm }
        onForgetPassword={ this._forgetPassword }
        inLoading={this.state.inLoading}
        errorMessage={this.state.errorMessage}
      />
    );
  }
  _onDismiss = () => {
    alert('密码框关闭之后回调')
  }
  _onConfirm = (value) => {
    if (this.state.limitCount <= 0) {
      return;
    }
    console.log(`输入的密码为${value}`);
    this.setState({
      inLoading: true,
    });
    setTimeout(() => {
      let limitCount = this.state.limitCount - 1;
      this.setState({
        inLoading: false,
        errorMessage: `您输入的密码错误，还有${limitCount}次机会`,
        limitCount: limitCount,
      });
    }, 1000);
  };

  _forgetPassword = () => {
    // TODO
  };
}

module.exports = LongPasswordExample;
